<template>
	<scroll-view class="lines-scroll" scroll-x="true" scroll-left="0">
		<view class="lines-scroll_item" v-for="index in 5" :key="index" @click="$rui.route('/pages/trip/detail/detail')">
			<view class="lines-scroll_item_head">
				<image class="lines-scroll_item_head_img" src="../../static/images/lines.jpg" mode=""></image>
				<view class="lines-scroll_item_head_top">{{index}}</view>
				<view class="lines-scroll_item_head_enroll">
					2111人已报名
				</view>
			</view>
			<view class="lines-scroll_item_info">
				<view class="lines-scroll_item_info_subtitle">
					游山玩水·成都出发
				</view>
				<view class="lines-scroll_item_info_title">
					西北传奇经典
				</view>
				<view class="lines-scroll_item_info_bottom">
					<view class="price">4080</view>
					<view class="lines-scroll_item_info_bottom_day">
						8天7晚
					</view>
				</view>
			</view>

		</view>
	</scroll-view>
</template>

<script>

</script>

<style lang="scss" scoped>
	.lines-scroll {
		white-space: nowrap;
		width: 100%;
		height: 500rpx;
		margin: 20rpx 0 0;
		scrollbar-width: none;

		&_item {
			width: 420rpx;
			margin-left: 20rpx;
			overflow: hidden;
			border-top-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			background: #fff;
			box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, .03);
			display: inline-block;

			&:last-child {
				margin-right: 20rpx;
			}

			&_info {
				padding: 20rpx;

				&_subtitle {
					color: #999;
					font-size: 24rpx;
				}

				&_title {
					font-weight: bold;
					margin: 10rpx 0;
					color: #333;
				}

				&_bottom {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					&_day {
						color: #999;
						font-size: 24rpx;
					}
				}
			}

			&_head {
				width: inherit;
				height: 320rpx;
				position: relative;

				&_enroll {
					position: absolute;
					bottom: 0;
					left: 0;
					background: linear-gradient(to left, #f30, #f80);
					padding: 2rpx 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-top-right-radius: 20rpx;
				}

				&_img {
					width: inherit;
					height: inherit;
				}

				&_top {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 0;
					left: 0;
					border-top-right-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
					background: linear-gradient(-45deg, #f30, #f80);
					color: #fff;
					text-align: center;
					line-height: 60rpx;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>